﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<%@ include file="/include/header.jsp"%>
<!-- 加载树-->
<%@ include file="/include/zTree.jsp"%>
<title>查询部门管理列表</title>
</head>
<body>
	<div class="main_panel">
		<div class="ch_panel" id="queryDiv">
			<table class="c_table">
				<tr>
					<td>
						<button class="a_btn" id="addBtn">新增</button>
					</td>
					<td class="t_r">部门：</td>
					<td class="t_l">
						<input type="text" id="parentName" readonly="readonly" value="" class="input_txt" style="width: 150px;" />
						<a href="javascript:showNewMenu();">选择</a>
						&nbsp;&nbsp;
						<a href="javascript:clear();">清除</a>
						<input type="hidden" data-qname="deptId" name="deptId" id="deptId" value="" />
						<div id="menuContent" class="menuContent" style="display: none; position: absolute; background-color: white; z-index: 1">
							<ul id="treeDemo" class="ztree"></ul>
						</div>
					</td>
					<td class="t_r">部门中文名称：</td>
					<td class="t_l">
						<input type="text" data-qname="deptCnName" name="deptCnName" id="deptCnName" value="" class="input_txt" style="width: 150px;" />
					</td>
					<td class="t_r">部门英文名称：</td>
					<td class="t_l">
						<input type="text" data-qname="deptEnName" name="deptEnName" id="deptEnName" value="" class="input_txt" style="width: 150px;" />
					</td>
					<td class="t_r">
						<input type="button" value="查询" id="searchBtn" class="c_btn" />
					</td>
				</tr>
			</table>
		</div>
		<table id="tbwrap" class="table table-border table-bordered table-bg m_t10 hovaertable"></table>
		<div class="page eui-pager-custom" id="j_pager"></div>
	</div>

	<script type="text/html" id="tb_template">
		<thead>
			<tr>
				<th>上级部门中文名称</th>
				<th>部门中文名称</th>
				<th>部门英文名称</th>
				<th>部门简称</th>
				<th>部门关联用户</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody data-type="body">
			<!if(list.length>0) { !>
				<!for(var i=0,len=list.length;i<len;i++){
					var item = list[i],classItem = (i%2!=0)?"odd td_odd":"even";
				!>
				<tr class="gradeA <!=classItem!>">
					<td><!=item["parentSysDeptCnName"]!></td>
					<td title="<!=item["deptCnName"]!>">
						<div style="width:200px;white-space: nowrap;text-overflow:ellipsis;text-overflow: ellipsis;overflow:hidden;">
							<!=item["deptCnName"]!>
						</div>
					</td>
					<td title="<!=item["deptEnName"]!>">
						<div style="width:150px;white-space: nowrap;text-overflow:ellipsis;text-overflow: ellipsis;overflow:hidden;">
							<!=item["deptEnName"]!>
						</div>
					</td>
					<td><!=item["deptReferred"]!></td>
					<td>
						<a title="查看关联用户" data-value="<!=item["deptId"]!>" class="userByDept">查看</a>
					</td>
					<td>
						<a title="详情" data-value="<!=item["deptId"]!>" class="view" style="text-decoration: none;margin-right: 10px;">
							<i class="Hui-iconfont">&#xe665;</i>
						</a>
						<a title="编辑" data-value="<!=item["deptId"]!>" class="edit" style="text-decoration: none;margin-right: 10px;">
							<i class="Hui-iconfont">&#xe6df;</i>
						</a>
						<a title="删除" data-value="<!=item["deptId"]!>" class="delete" style="text-decoration: none">
							<i class="Hui-iconfont">&#xe6e2;</i>
						</a>
					</td>
				</tr>
			<!}!>
			<!}else{!>
				<tr>
					<td colspan="7"> 暂无数据</td>
				</tr>
			<!}!>
		</tbody>
	</script>

	<script type="text/javascript">
		var sysDeptDialog;
		$(function () {

			//ajax请求添加等待图片
			$(document).ajaxStart(function () {
				ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 8000);
			});

			$(document).ajaxComplete(function () {
				ZENG.msgbox.hide();
			});

			// 添加
			$("#addBtn").click(function() {
				parent.member_add("添加部门信息", "${ctx}/sysDept/toAdd",800,460);
			});
			
			// 编辑
			$("#tbwrap").delegate(".edit", "click", function() {
				//获取主键
				var deptId = $(this).data("value");
				parent.member_add("编辑部门信息", "${ctx}/sysDept/toEdit?deptId="+deptId,800,460);
				
			});
			
			// 详细
			$("#tbwrap").delegate(".view", "click", function() {
				//获取主键
				var deptId = $(this).data("value");
				parent.member_add("查看部门信息", "${ctx}/sysDept/view?deptId="+deptId,600,300);
				
			});
			
			// 4、假删除
			$("#tbwrap").delegate(".delete", "click", function () {
				var deptId = $(this).data("value");

				if (confirm('删除该节点的同时会将其下辖节点也一并删除,确定删除？')) {
					$.post("${ctx}/sysDept/delete", {
						deptId : deptId, CSRFToken : $("#CSRFToken").val()
					}, function (result) {
						if ("succ" == result) {
							alert("操作成功");
							// 刷新列表页面
							search();
						} else {
							alert(result);
						}
					}, "json");
				}

			});

			//查看部门关联用户
			$("#tbwrap").delegate(".userByDept", "click", function() {
				//获取主键
				var deptId = $(this).data("value");
				parent.member_add("查看部门关联用户", "${ctx}/sysDept/toGetUserByDeptId?deptId="+deptId,800,550);
				
			});

			// 5、查询
			$("#searchBtn").click(function () {
				search();
			});

			// 页面加载完成调用查询分页
			search();
		});
	</script>

	<script type="text/javascript">
		function search () {
			// 这里放包含查询条件的DIV
			var paramData = easyUtils.getQueryDivDefault("queryDiv");

			seajs.use([ "component/table" ], function (uiTable) {
				var param = {
					url : "${ctx}/sysDept/ajaxPage", data : paramData
				};
				easyUtils.getData(param, function (result) {
					easyUtils.buildTable(result, param, uiTable);
				});
			});
		}
	</script>

	</script>

	<!--部门机构树状结构 -->
	<script type="text/javascript">
		//请选择初始化树结构
		function showNewMenu () {
			initTree();
			showMenu();
		}

		function clear () {
			$("#parentName").val("");
			$("#deptId").val("");
		}

		function showMenu () {
			var cityObj = $("#parentName");
			var cityOffset = $("#parentName").offset();
			$("#menuContent").css({
				left : cityOffset.left + "px", top : cityOffset.top + cityObj.outerHeight() + "px"
			}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}

		function hideMenu () {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}

		function onBodyDown (event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
				hideMenu();
			}
		}

		function onClick (e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes();
			if (nodes.length > 0) {
				$("#parentName").val(nodes[0].name);
				$("#deptId").val(nodes[0].id);
			}
			hideMenu();
		}

		function initTree () {
			var setting = {
				data : {
					simpleData : {
						enable : true
					}
				}, view : {
					showLine : false
				}, async : {
					enable : true, url : "${ctx}/sysDept/deptTree", autoParam : [ "id" ], dataType : "json"
				}, callback : {
					asyncError : zTreeOnAsyncError, //加载错误的fun 
					onClick : onClick
				}
			};
			function zTreeOnAsyncError (event, treeId, treeNode) {
				alert("异步加载失败!");
			}

			$.fn.zTree.init($("#treeDemo"), setting);
			zTree = $.fn.zTree.getZTreeObj("treeDemo");
		}
		initTree();
	</script>

	<%@ include file="/include/footer.jsp"%>
</body>
</html>
